<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
	<head>
		<meta charset="utf-8">
		<title>实时分析</title>
		<link rel="stylesheet" href="${contextPath}/css/ElementCss/theme/index.css">
		<link rel="stylesheet" href="${contextPath}/css/home.css" />
		<link rel="stylesheet" href="https://js.arcgis.com/4.14/esri/themes/light/main.css" />
	</head>
	<style>
		[v-cloak] {
			display: none;
		}
	</style>
	<body>

		<div id="main" class="all" v-cloak>
			<div class="allLeft">
				<!-- 左侧菜单栏 -->
				<div class="menuLeft" v-for="(menu,index) in menuLefts" @click="leftSwitch(index)" v-bind:class="{menuLeftS: leftNum== index}">
					<img v-bind:src="menu.url" /><br />{{menu.title}}<br />
					<hr />
				</div>
			</div>
			<div class='allRight rightBaseDiv'>

				<div class="rightTopDiv">
					<div class="TopDivLeft">
						<span v-for="(span,index) in changeSpan" @click="changeSpanFun(index)" v-bind:class="{spanChange: spanFlose== index,borderSpan : index == 0}">
							{{span.title}}
						</span>
					</div>

					<div class="TopDivRight">
						<div class="selectSpan">
							<el-button type="primary">查询</el-button>
						</div>
						<div class="selectSpan">
							<el-date-picker v-model="queryData" type="date" placeholder="请选择日期" class="selectClass">
							</el-date-picker>
						</div>
						<temp-select v-bind:modevalue="areaQuery" v-bind:datavalue="fixedOption" title="请选择观测点" classname="selectSpan"></temp-select>
						<temp-select v-bind:modevalue="areaQuery" v-bind:datavalue="areaOpetion" title="请选择海域" classname="selectSpan"></temp-select>
					</div>
				</div>
				<div class="rightBottemDiv" v-show="mapShow">
					<div class="rightTable">
						<el-table :data="tableData" stripe style="width: 100%">
							<el-table-column prop="area" label="海域">
							</el-table-column>
							<el-table-column prop="observation" label="观测点">
							</el-table-column>
							<el-table-column prop="PH" label="PH">
							</el-table-column>
							<el-table-column prop="temperature" label="温度">
							</el-table-column>
							<el-table-column prop="chlorine" label="余氯">
							</el-table-column>
							<el-table-column prop="turbidity" label="浊度">
							</el-table-column>
							<el-table-column prop="dissolves" label="溶解氢">
							</el-table-column>
							<el-table-column prop="NH3" label="NH3-N">
							</el-table-column>
							<el-table-column prop="early" label="预警">
							</el-table-column>
							<el-table-column prop="time" label="时间">
							</el-table-column>
							<el-table-column prop="operation" label="操作">
								<a style="color: #0CBDD7;">下载</a>
								<a style="color: #0CBDD7;">地图</a>
							</el-table-column>
						</el-table>
						<div class="rightTableFoot">
							<el-pagination background layout="prev, pager, next" :total="1000">
							</el-pagination>
						</div> 
					</div> 
				</div> 
				<div  v-show="!mapShow" class="rightBottemDiv">
					<div id="viewDiv"  class="max"></div>
				</div>

			</div>

		</div>
	</body>
	<script src="${contextPath}/js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script src="${contextPath}/js/elementIndex.js"></script>
	<script src="${contextPath}/js/vueApp.js" type="text/javascript" charset="utf-8"></script>
	<script src="${contextPath}/js/analogueData.js" type="text/javascript" charset="utf-8"></script> <!-- 模拟数据 -->
	<script src="https://js.arcgis.com/4.14/"></script>
	<script>
		require(["esri/Map", "esri/views/MapView"], function(Map, MapView) {
			var map = new Map({
				basemap: "streets"
			});
			var view = new MapView({
				container: "viewDiv", // Reference to the scene div created in step 5
				map: map, // Reference to the map object created before the scene
				zoom: 4, // Sets zoom level based on level of detail (LOD)
				center: [15, 65] // Sets center point of view using longitude,latitude
			});
		});
		var em = new Vue({
			el: main,
			data: {
				leftNum: 0, //用来判断左侧菜单的样式，选取0位第一个 
				mapShow: true,
				spanFlose: 1,
				menuLefts: [{ //构建的左侧菜单选项
					title: "站点监测",
					url: "${contextPath}/img/home/siteMonitoringS.png"
				}, {
					title: "浓度分析",
					url: "${contextPath}/img/home/concentration.png"
				}],
				areaQuery: '',
				fixedQuery: '',
				queryData: '',
				changeSpan: [{ //构建的选项的span
					title: "地图",
				}, {
					title: "列表",
				}],
				areaOpetion: analAreaData,
				fixedOption: analBaseData,
				tableData: analTableData, //模拟表格数据
			}, 
			methods: {
				leftSwitch(index) { //上方菜单栏切换事件
					this.leftNum = index;
					for (i = 0; i < this.menuLefts.length; i++) {
						this.menuLefts[i].url = this.menuLefts[i].url.replace("S.png", ".png");
					}
					this.menuLefts[index].url = this.menuLefts[index].url.replace(".png", "S.png");
					switch (index) {
						case 0:

							break;
						case 1:
							// 气象数据

							break;
					}
				},
				changeSpanFun(index) { //地图列表切换
					this.spanFlose = index;
					this.mapShow = !this.mapShow;
				},
			}
		});
	</script>
</html>
